<template>
  <div>
    <!-- 登录表单标题 -->
    <h2>登录页面</h2>

    <!-- 登录表单，使用Vue事件修饰符阻止默认提交 -->
    <form @submit.prevent="handleLogin">
      <div>
        <label>用户名：</label>
        <!-- 双向绑定用户名输入框 -->
        <input type="text" v-model="username" />
      </div>
      <div>
        <label>密码：</label>
        <!-- 双向绑定密码输入框 -->
        <input type="password" v-model="password" />
      </div>
      <!-- 提交按钮 -->
      <button type="submit">登录</button>
    </form>

    <!-- 错误提示信息（红色文字） -->
    <p v-if="error" style="color:red;">{{ error }}</p>
  </div>
</template>

<script>
export default {
  name: 'Login', // 组件名称
  data() {
    return {
      username: '', // 用户名输入框绑定值
      password: '', // 密码输入框绑定值
      error: ''     // 错误信息存储
    }
  },
  methods: {
    /**
     * 处理登录表单提交
     * 1. 发送跨域认证请求到auth.sso.com服务端
     * 2. 处理响应并进行路由跳转
     * 3. 捕获并处理请求异常
     */
    async handleLogin() {
      try {
        // 发送POST请求到服务端
        const response = await fetch('http://auth.sso.com:8081/auth/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded' // 表单数据格式
          },
          credentials: 'include', // 携带跨域凭证（Cookie）
          body: new URLSearchParams({
            username: this.username,
            password: this.password
          }).toString() // 将参数转换为URL编码格式
        });

        // 处理成功响应
        if (response.ok) {
          // 检查响应内容类型（兼容不同响应格式）
          const contentType = response.headers.get('content-type');
          if (contentType && contentType.includes('application/json')) {
            const data = await response.json();
            console.log('登录成功:', data);
          }
          // 跳转到欢迎页面
          this.$router.push('/welcome');
        } else {
          // 处理业务错误（如401未授权）
          this.error = '登录失败，用户名或密码错误';
        }
      } catch (err) {
        // 捕获网络层错误
        this.error = '登录请求出错';
        console.error('登录异常:', err);
      }
    }
  },
  mounted() {
    // 账号密码（硬编码）
    this.username = '123456';
    this.password = '123456';
  }
}
</script>
